<template>
    <div class="article_details_publication_box outer_shadows">
        <p class="article_details_publication_title" v-if="!user.username">发表回复</p>
        <div style="width: 100%">
             <textarea class="article_details_publication_content"
                       v-model="content"
                       @focus="edit_f" @blur="edit_o">
             </textarea>
            <img src="/public/img/huifu.png" @click="expression_display = !expression_display"
                 class="article_details_publication_expression_switch" alt="">
            <ul class="article_details_publication_expression" v-show="expression_display">
                <li v-for="(item,index) in expression" :key="index" @click="add_expression(item)">{{ item }}</li>
            </ul>
        </div>
<!--        <div class="article_details_publication_info">-->
<!--            <span style="color: #1a75ee">*</span>名称：<input type="text" v-model="myInfo.username" placeholder="必填项">-->
<!--            <span style="color: #1a75ee">*</span>QQ：<input type="text" v-model="myInfo.qq" placeholder="必填项">-->
<!--        </div>-->

        <div class="article_details_publication_submit">
<!--            <span><input type="checkbox" v-model="remember_me">记住名称,下次不再填写</span>-->
            <button @click="sub">提交</button>
        </div>
    </div>
</template>
<!--发表评论-->
<script setup>
import {onMounted, ref} from "vue";
import store from "@/store/index.js";

// emit事件
const emit = defineEmits(['replySub']);

//回复评论的用户的id，不是评论者的id
const user = defineProps({
    username:{
        default:null,
        type:String
    }
})

// 评论内容文本框光标位置
const cursorIndex = ref(0);


// 默认评论内容
const def_content = ref('写下您的评论吧。。。。');

// 提交的评论内容
const content = ref("");

// 预加载事件
onMounted(() => {
    content.value = def_content.value;
    // window.addEventListener('scroll', throttleHandleScroll);
});

//是否显示表情列表
const expression_display = ref(false)

//表情内容列表
const expression = ref(['😀', '😄', '😁', '😅', '🤣', '🙂', '😉', '😊', '🥰', '😍', '😘', '🤑',
    '😚', '😑', '😏', '😪', '😎', '😾', '😭', '😓', '😖', '👋', '🤬', '😷',
    '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🤡', '🤥', '🤫', '🤭', '🧐',
    '🤓', '😈', '👿', '👹', '👺', '💀', '👻', '👽', '🤖', '💣', '💩', '😺',
    '😸', '😹', '😻', '😼', '😽', '🙀', '😿',]);

// 添加表情到内容列表
const add_expression = (expression) => {
    let body = (content.value).trim(); // 原字符串
    if (body === def_content.value) {
        content.value = expression;
        return;
    }
    let front = body.slice(0, cursorIndex.value); //前半段内容
    let after = body.slice(cursorIndex.value, body.length); //后半段内容
    content.value = front + expression + after; // 新增的中间的表情内容
    console.log(typeof  cursorIndex.value)
}

// 提交评论
const sub = () => {
    if(!store.state.user || !store.state.user.id){
        store.commit('info_sub', {msg: '请先登录！', type: "warn"});
        return;
    }

    //判断评论内容是否有效
    let contentText = (content.value).trim();
    if (contentText === '' || !contentText || contentText === '写下您的评论吧。。。。') {
        store.commit('info_sub', {msg: '内容为空或无效！', type: "warn"});
        content.value = '';
        return;
    }
    emit('replySub', content.value); //提交评论
    store.commit('info_sub', {msg: '评论成功！', type: "normal"});
}
// 获得焦点
const edit_f = () => {
    if (content.value === def_content.value) {
        content.value = ''
    }
}
// 失去焦点
const edit_o = (e) => {
    cursorIndex.value = e.target.selectionEnd; //记录光标结束位置
    if (content.value === '' || content.value === ' ') {
        content.value = def_content.value
    }
}


//是否开启滚动加载
const scrollLoad = ref(true);
//监听页面的滚动高度,快达到底部时加载文章数据
const throttleHandleScroll = () => {
    // //执行的高度,距离底部高度
    // const distanceToBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
    // if (distanceToBottom <= 200 && scrollLoad.value) {
    //     scrollLoad.value = false;
    //     console.log("滚动加载文章数据~~~~");
    //     pages.value.current += 1;
    //     getData();
    // }else if(distanceToBottom > 200){
    //     scrollLoad.value = true;
    // }
};

</script>

<style scoped>
.article_details_publication_box {
    width: 100%;
    padding: 0 20px;
    animation: asd .3s ease-in-out 0s 1 forwards;
}

@keyframes asd {
    0% {
        transform: scale(0);
    }
    90% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.article_details_publication_title {
    border-left: 3px solid #6da6e1;
    font-size: 14px;
    padding: 0 5px;
}

.article_details_publication_content {
    width: 100%;
    min-height: 100px;
    max-height: 200px;
    padding: 10px 10px 25px;
    margin: 10px 0;
    resize: vertical;
    outline: none;
    font-size: 15px;
    background: transparent;
    border: 1px solid rgba(96, 97, 98, 0.2);
}

.article_details_publication_info {
    margin-bottom: 10px;
}

.article_details_publication_info input {
    height: 25px;
    outline: none;
    margin-right: 20px;
    border: 0;
    background: transparent;
    border-bottom: 1px dotted rgba(96, 97, 98, 0.36);
}

.article_details_publication_submit {
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
}

.article_details_publication_submit input {
    margin-top: 3px;
}

.article_details_publication_submit span {
    font-size: 13px;
    display: flex;
    align-items: center;
}

.article_details_publication_submit button {
    background: #6da6e1;
    width: 70px;
    height: 30px;
    outline: none;
    border: 0;
    color: white;
    border-radius: 3px;
}

.article_details_publication_submit button:hover {
    opacity: .9;
    cursor: pointer;
}

.article_details_publication_expression {
    display: grid;
    grid-template-columns: repeat(20, 3.1%);
    align-items: center;
    list-style: none;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 17px;
    width: 100%;
    padding: 5px 0 20px;
    animation: expression ease-in .3s 0s 1 forwards;
}

@keyframes expression {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }

}

.article_details_publication_expression li:hover {
    cursor: pointer;
    opacity: .8;
}

.article_details_publication_expression_switch {
    width: 20px;
    padding-bottom: 5px;
}

.article_details_publication_expression_switch:hover {
    cursor: pointer;
    opacity: .8;
}
</style>